<template>
  <view>
    <view class="inputWrapper">
      <u-search
        placeholder="请输入想要搜索的商品"
        v-model="keyword"
        :clearabled="true"
        :show-action="true"
        action-text="搜索"
        :animation="true"
        focus="true"
        input-align="center"
        height="80"
        bg-color="#e7e7e7"
        :action-style="searchBtnStyle"
        @search="submitSearch"
        @custom="submitSearch"
      ></u-search
    ></view>
    <GoodsItem v-for="item in goodsList" :key="item.goods_id" :data="item" />
  </view>
</template>

<script>
import GoodsItem from '../goods_list/components/GoodsItem.vue';
export default {
  components: { GoodsItem },
  data() {
    return {
      keyword: '',
      goodsList: [],
      searchBtnStyle: {
        fontSize: '26rpx',
        background: '#EA4350',
        lineHeight: '80rpx',
        color: '#fff',
        borderRadius: '40rpx',
      },
    };
  },
  methods: {
    submitSearch() {
      this.totalPage = 0;
      this.isFinished = false;
      this.params = {
        cid: '',
        query: '',
        pagenum: 1,
        pagesize: 10,
      };
      this.goodsList = [];
      this.params.query = this.keyword;
      this.getGoods();
    },
    async getGoods() {
      const { message } = await this.$u.get('/goods/search', this.params);
      this.goodsList = [...this.goodsList, ...message.goods];
      this.totalPage = Math.ceil(message.total / this.params.pagesize);
      if (message.goods.length < this.params.pagesize) {
        this.isFinished = true;
      }
    },
  },
  onLoad() {
    this.totalPage = 0;
    this.isFinished = false;
    this.params = {
      cid: '',
      query: '',
      pagenum: 1,
      pagesize: 10,
    };
  },
  onReachBottom() {
    if (this.isFinished) {
      uni.showToast({
        title: '已经加载完毕！',
        icon: 'none',
      });
      return;
    }
    this.params.pagenum++;
    this.getGoods();
  },
};
</script>

<style lang="scss" scoped>
.inputWrapper {
  padding: 35rpx;
}
</style>
